﻿<template>
    <el-steps align-center :direction="direction" :active="active" :style="Style">
        <el-step v-for="item,index in MyOptions" :key="index"
                 :title="$t(item.title)"
                 :description="item.description"
                 :icon="item.icon"></el-step>
    </el-steps>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0
    },
    options: {
      type: [Array, Function],
      default: []
    },
    direction: {
      type: String,
      default: 'vertical'
    },
    peroptionHeight: {
      type: Number,
      default: 80
    }
  },
  computed: {
    Style () {
      return `height:${this.peroptionHeight * this.MyOptions.length}px`
    },
    MyOptions () {
      let options = this.options

      if (Object.prototype.toString.call(this.options) === '[object Function]') {
        options = this.options()
      }

      return options
    }
  }
}
</script>
